<template>
  <view class="l-title padding-bottom-30 padding-left-20 flex-row align-center relative justify-between" :class="{'no-border':noBorder}">
    <text class="text-34 color-t1 text-bold">{{ title }}</text>
    <slot />
    <view class="line" />
  </view>
</template>

<script>
export default {
  name: 'LTitle',
  props: {
    title: {
      type: String,
      default: ''
    },
    noBorder: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped lang="scss">
.l-title{
  border-bottom:2rpx solid $color-border;
  height:78rpx;
}
.line{
  width: 8rpx;
  height: 32rpx;
  background: $color-primary;
  border-radius: 4rpx;
  @include position(absolute,10rpx,$left:0);
}
.no-border{
  border:none;
}
</style>
